<div class="container">
  <div class="panel panel-primary starter-template">
    <!-- Default panel contents -->
    <div class="panel-heading">FreeBase Simple Tester </div>
    <div class="panel-body">
      <p> Here's a simple tester for FreeBase. </p>
      <p> Current version: <?php echo $version; ?> </p>
    </div>

    <table id="query_table" class="table table-hover table-striped">
      <script type="text/javascript">
        $(function(){
          $('#query_table td:nth-child(2)').css('text-align','left').siblings().css('text-align','center')
        })
      </script>

      <thead>
        <tr>
          <th width="10%"> Query </th>
          <th width="60%"> Query Description </th>
          <th width="30%"> Start Test </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td> Query 1 </td>
          <td> Search a name, return all entities that match the name, better to rank the entities, like 
  Wikipedia. For example, when we search Einstein, the famous physicist Albert Einstein may 
  rank first. </td>
          <td>
            <button type="button" class="btn btn-primary"  data-toggle="modal" data-target="#query1">Manual test</button>
            <button type="button" class="btn btn-success" id="auto_test1">Auto test</button>
          </td>
        </tr>

        <tr>
          <td> Query 2 </td>
          <td> Given an entity ID, return all types it belongs to.</td>
          <td>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#query2">Manual test</button>
            <button type="button" class="btn btn-success" id="auto_test2">Auto test</button>
          </td>
        </tr>

        <tr>
          <td> Query 3 </td>
          <td> Given an entity ID, return all properties whose schema/expected_type is one type of the 
  entity. </td>
          <td>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#query3">Manual test</button>
            <button type="button" class="btn btn-success" id="auto_test3">Auto test</button>
          </td>
        </tr>

        <tr>
          <td> Query 4 </td>
          <td> Given an entity ID, return all objects that are co-occurred with this entity in one triple. </td>
          <td>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#query4">Manual test</button>
            <button type="button" class="btn btn-success" id="auto_test4">Auto test</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>


  <div class="starter-template panel panel-info">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Test Result
        </a>
        &nbsp &nbsp 
        <img id="waiting" src="<?php echo base_url("public/img/wait.gif"); ?>" alt="waiting" class="img-rounded" />
        &nbsp &nbsp
        <span class="badge" id="timer"> 1 </span>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body"  id="test_result">
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="query1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel"> Query 1 Manual Test </h4>
      </div>
      <div class="modal-body">
         <input type="text" class="form-control" id="query1_input" placeholder="Input the name">     
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button id="manual_test1" type="button" class="btn btn-primary" data-dismiss="modal"> Start Test </button>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="query2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Query 2 Manual Test </h4>
      </div>
      <div class="modal-body">
        <input type="text" class="form-control" id="query2_input" placeholder="Input the entity ID">     
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button id="manual_test2" type="button" class="btn btn-primary" data-dismiss="modal"> Start Test </button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="query3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Query 3 Manual Test </h4>
      </div>
      <div class="modal-body">
        <input type="text" class="form-control" id="query3_input" placeholder="Input the entity ID">     
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button id="manual_test3" type="button" class="btn btn-primary" data-dismiss="modal"> Start Test </button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="query4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Query 4 Manual Test </h4>
      </div>
      <div class="modal-body">
        <input type="text" class="form-control" id="query4_input" placeholder="Input the entity ID">     
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button id="manual_test4" type="button" class="btn btn-primary" data-dismiss="modal"> Start Test </button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
 
  $("#waiting").hide();
  $("#timer").hide();
  var sec = 0, t;
  function setTime() {
    $("#timer").html("time: " + sec);
    sec++;
  }
  setInterval("setTime()", 1000);


  $(document).ready(function(){

    $("#manual_test1").click(function() {
      waitForResult();
      var data = {name : $("#query1_input").val()};
      send(data, "<?php echo site_url('/test/manual_test1'); ?>");
    });

    $("#manual_test2").click(function() {
      waitForResult();
      var data = {ID : $("#query2_input").val()};
      send(data, "<?php echo site_url('/test/manual_test2'); ?>");
    });

    $("#manual_test3").click(function() {
      waitForResult();
      var data = {ID : $("#query3_input").val()};
      send(data, "<?php echo site_url('/test/manual_test3'); ?>");
    });

    $("#manual_test4").click(function() {
      waitForResult();
      var data = {ID : $("#query4_input").val()};
      send(data, "<?php echo site_url('/test/manual_test4'); ?>");
    });  

    $("#auto_test1").click(function() {
      waitForResult();
      var data = {ID : "auto_test1"};
      send(data, "<?php echo site_url('/test/auto_test1'); ?>");
    });

    $("#auto_test2").click(function() {
      waitForResult();
      var data = {ID : "auto_test2"};
      send(data, "<?php echo site_url('/test/auto_test2'); ?>");
    });

    $("#auto_test3").click(function() {
      waitForResult();
      var data = {ID : "auto_test3"};
      send(data, "<?php echo site_url('/test/auto_test3'); ?>");
    });

    $("#auto_test4").click(function() {
      waitForResult();
      var data = {ID : "auto_test4"};
      send(data, "<?php echo site_url('/test/auto_test4'); ?>");
    });
  })

  function send(data, url) {
    $.post(url, data, function(res){
      $("#test_result").html(res);
      $("#waiting").hide();
      $("#timer").hide();
    })
  }

  function waitForResult() {
    sec = 0;
    $("#waiting").show();
    $("#timer").show();
    $("#test_result").html("");
  }



</script>